<template>
  <el-container>
    <!-- 头部 -->
    <el-header>
      <div>
        <span>欢迎来到用户管理系统</span>
      </div>
      <button @click="loginout()">注销账号</button>
    </el-header>
    <el-container>
      <!-- 左侧边 -->
      <el-aside :width="isshow ? '64px' : '200px'">
        <div class="toggle-button" @click="login_zd">|||</div>
        <el-row>
          <el-menu background-color="#333744" text-color="#fff" active-text-color="#409EFF"
          unique-opened :collapse="isshow" :collapse-transition="false">
            <el-sub-menu v-for="(item, index) in menus" :index="index + '1'" :key="item.id">
              <template #title>
                <el-icon>
                  <component :is="icon[index]"></component>
                </el-icon>
                <span>{{ item.authName }}</span>
              </template>
              <el-menu-item v-for="(a, b) in item.children" :index="index + '1' + '-' + b + '1'" :key="a.id">
                <el-icon>
                  <component :is="icons[index]"></component>
                </el-icon>
                <router-link :to="'/index/' + a.path">{{ a.authName }}</router-link>
              </el-menu-item>
            </el-sub-menu>
          </el-menu>
        </el-row>
      </el-aside>
      <!-- 主要内容 -->
      <el-main>
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>


</template>
<script>
export default {
  props: [],
  data() {
    return {
      menus: [],
      icon: [
        "User",
        "Refresh",
        "Bell",
        "Switch",
        "EditPen"
      ],
      icons: [
        'User',        // 用户管理
        'Setting',     // 权限管理
        'Bell',        // 商品管理
        'Goods',       // 订单管理
        'List',        // 数据统计
        'Grid'         // 其他
      ],
      //是否折叠
      isshow:false
    }
  },
  methods: {
    loginout() {
      window.sessionStorage.removeItem("token");   //移除sessionStorage里数据
      this.$router.push({ path: "/login" })       //跳转到登录页
    },
    async getmenus() {
      let data = await this.$axios.get("/menus");
      this.menus = data.data.data
    },
    login_zd() {
      this.isshow=!this.isshow
    }

  },
  mounted() {    //挂载之后调用
    this.getmenus()
  }
}
</script>
<style scoped>
.toggle-button{
  background-color: #475163;
  text-align: center;
  color: white;
  font-size: 12px;
  line-height: 25px;
  letter-spacing: 0.2em;    /* 间距 */
  cursor: pointer;     /* 鼠标小手 */
}
.el-container{
  height: 100%;
}
.el-header {
  background-color: #363d40;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: white;
  font-size: 20px;
  >button{
    padding: 8px;
  }
}
.el-menu {
  width: 100%;
  border: none;
  background-color: #313743;
}

.el-container {
  background-color: #313743;
}

.el-main {
  background-color: #e9edf1;
}

.el-menu-item>a {
  text-decoration: none;
  color: white;
}

.is-active>a {
  color: var(--el-menu-active-color);
  text-decoration: none;
}
</style>